<template>
  <div id="home">
    <nav-bar :title="'编辑资料'" :back-to="'/user'" :left-text="'返回'" :is-arrow="true" />
    <div class="user_info">
      <div class="item1 item">
        <van-cell title="头像" is-link />
        <van-cell title="收货地址" is-link />
      </div>
      <div class="item2 item">
        <van-cell title="昵称" value="小明" is-link />
        <van-cell title="性别" is-link :value="sex" @click="sexSelectShow = true" />
        <van-action-sheet
          v-model="sexSelectShow"
          :actions="sexValue"
          cancel-text="取消"
          close-on-click-action
          @cancel="sexCancell"
          @select="sexConfirm"
        />
        <van-cell title="生日" is-link :value="birthday" @click="birthdayShow = true" />
        <div class="bri">
          <van-action-sheet v-model="birthdayShow">
            <van-datetime-picker
              v-model="selectBirthdayDate"
              type="date"
              title="选择年月日"
              :min-date="minBirthdayDate"
              :max-date="maxBirthdayDate"
              @confirm="confirmBirthday"
              @cancel="cancelBirthday"
            />
          </van-action-sheet>
        </div>
      </div>
      <div class="item3 item">
        <van-cell title="职业" is-link />
        <van-cell title="公司" is-link />
      </div>
      <div class="item4 item">
        <van-cell title="邮箱" is-link />
        <van-cell title="电话" is-link />
      </div>
      <div class="item5 item">
        <van-cell title="我的二维码" is-link to="/user/userInfo/code" />
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/common/NavBar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      sexSelectShow: false,
      birthdayShow: false,
      sexValue: [{ name: '男' }, { name: '女' }],
      brithdayValue: [{ name: '确认' }],
      sex: '男',
      birthday: '',
      minBirthdayDate: new Date(2000, 0, 1),
      maxBirthdayDate: new Date(2020, 10, 1),
      selectBirthdayDate: new Date()
    }
  },
  methods: {
    sexCancell() {},
    sexConfirm(item) {
      this.sex = item.name
    },
    confirmBirthday() {
      const birthdayTime = this.selectBirthdayDate
      const y = birthdayTime.getFullYear()
      const m = (birthdayTime.getMonth() + 1 + '').padStart(2, '0')
      const d = (birthdayTime.getDate() + '').padStart(2, '0')
      this.birthday = `${y}-${m}-${d}`

      this.birthdayShow = false
    },
    cancelBirthday() {
      this.birthdayShow = false
    }
  }
}
</script>
<style scoped>
.van-cell {
  height: 3.5rem;
  font-size: 1rem;
}
.van-cell__value {
  text-align: left;
}
.item {
  margin: 1rem 0;
}
.bri {
  position: relative;
}
.bri .van-popup--bottom {
  height: 18rem;
}
.bri .van-action-sheet__item {
  position: absolute;
  top: 80%;
  border: 1px solid #eee;
}
</style>
